<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-05-22 16:16:03
-->
<template>
  <div class="swiper swiper-virtual cardSwipe">
    <div class="swiper-wrapper"></div>
  </div>
</template>
<script setup lang="ts" name="cardSwipe">
import { BASE_URL_PREFIX } from "~/config";
import { onMounted, onUnmounted } from "vue";
import { loadScript } from "@/utils";

const props = withDefaults(
  defineProps<{
    centerindex?: number;
  }>(),
  {
    centerindex: 0,
  }
);

const emit = defineEmits(["initDone", "update:centerindex", "change"]);
const { t } = useI18n();
let swiper: any = null;
const isScriptDone = ref(false);
const isOnMounted = ref(false);
// 配置文案
const getCardText = (val: number) => {
  if (val == 1) {
    return "1%";
  } else if (val == 2) {
    return "3%";
  } else if (val == 3) {
    return "5%";
  } else if (val == 4) {
    return "0.1%";
  } else if (val == 5) {
    return "0.5%";
  }
  return "0.5%";
};

/**
 * @description: 手动加在script脚本,失败会重试 3 次
 */
loadScript("/file/swiper-bundle.min.js", () => {
  isScriptDone.value = true;
});

// 初始化Swiper
const initSwiper = () => {
  swiper = new Swiper(".swiper", {
    slidesPerView: 4,
    initialSlide: 997,
    spaceBetween: 0,
    touchRatio: 0.36,
    centeredSlides: true,
    virtual: {
      addSlidesBefore: 3,
      addSlidesAfter: 3,
      slides: (function () {
        const slides = [];
        for (var i = 0; i < 2000; i += 1) {
          slides.push(i + 1);
        }
        return slides;
      })(),
      renderSlide: function (slide, index) {
        return `<div
        class="swiper-slide swipeCarditem items-center"
      >
        <img class="swipeCarditem-icon" src="${BASE_URL_PREFIX}/image/lottery/card.svg" />
        <span class="swipeCarditem-bfb">
          ${getCardText((index % 5) + 1)}
        </span>
        <span class="swipeCarditem-jc">
          ${t("lottery.jackpot")}
        </span>
      </div>`;
      },
      // renderExternal: function (data) {
      //   console.log("--data--", data);
      //   // return data.slides[0]
      // },
    },
    on: {
      // Swiper Change 事件
      slideChange: function () {
        // console.log("card 改变了，activeIndex为" + this.activeIndex);
        // 通知
        // emit("update:centerindex", idx);
        emit("change", this.activeIndex);
      },
      // 加载完成通知
      init: function (val: any) {
        emit("initDone", val);
      },
    },
  });
  // 将卡片滚动移动到中间位置
  // swiper.slideTo(4999, 0);
};

watch([isOnMounted, isScriptDone], (neweVal) => {
  if (neweVal[0] && neweVal[1] && !swiper) initSwiper();
});

onMounted(() => {
  isOnMounted.value = true;
});
onUnmounted(() => {
  if (swiper) swiper.destroy(); // 移除
});
</script>
<style lang="scss">
@import url("./swiper-bundle.min.css");
.cardSwipe {
  .swiper-slide {
    transform: scale(0.8) !important;
  }
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1) !important;
    margin-right: 7.5 * 2px !important;
  }
  .swiper-slide-prev {
    transform: scale(0.9) !important;
    margin-right: 7.5 * 2px !important;
  }
  .swiper-slide-next {
    transform: scale(0.9) !important;
    margin-right: -2.5 * 2px !important;
  }
  .swipeCarditem {
    justify-content: center;
    position: relative;
    margin-right: -2.5 * 2px;
    &-icon {
      width: 100%;
      height: 100%;
    }
    &-bfb {
      position: absolute;
      top: 70px;
      left: 0px;
      width: 100%;
      text-align: center;
      color: #f623b6;
      font-size: 13 * 2px;
      font-weight: 700;
      &-bfb0 {
        top: 68px;
      }
      &-bfb1 {
        top: 60px;
      }
    }
    &-jc {
      position: absolute;
      bottom: 38px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #fcffc7;
      font-weight: 590;
      font-size: 11 * 2px;
      &-jc0 {
        bottom: 38px;
      }
      &-jc1 {
        bottom: 32px;
      }
    }
  }
}
</style>
